@import './reset.less';
@import '../../../style/common/index.less';

.btn-default {
  .btn-size();
  .btn-color(@btn-default-bg, @gray-main, @gray-4);
  .btn-animation(@info-active);

  &:hover,
  &:focus {
    .btn-color(@btn-default-bg, @info-hover, @info-hover);
    .btn-loading(@info-hover);
  }

  &:active {
    .btn-color(@btn-default-bg, @info-active, @info-active);
    .btn-loading(@info-active);
  }

  &&[disabled] {
    &.@{btn-prefix-cls}-loading > .@{btn-prefix-cls}-loading-icon > * {
      &:nth-of-type(1),
      &:nth-of-type(2) {
        border-top-color: @btn-disable-color;
      }
    }
  }
}

.btn-primary {
  .btn-color(@info-default, @white-main, @info-default);
  text-shadow: @btn-text-shadow;

  &:hover,
  &:focus {
    .btn-color(@info-hover, @white-main, @info-hover);
    .btn-loading(@white-1);
  }

  &:active {
    .btn-color(@info-active, @white-main, @info-active);
    .btn-loading(@white-1);
  }

  &&[disabled] {
    color: @white-main;
    background-color: @info-disable;
    border-color: @info-disable;

    &.@{btn-prefix-cls}-loading > .@{btn-prefix-cls}-loading-icon > * {
      &:nth-of-type(1),
      &:nth-of-type(2) {
        border-top-color: @white-1;
      }
    }
  }

  .btn-ghost(@info-default, @info-default);
  .btn-loading(@white-1);
}

.btn-text {
  .btn-clear();

  &:hover,
  &:focus,
  &:active {
    .btn-color(@white-3, @gray-main, @gray-4);
    .btn-loading();
  }

  &&[disabled] {
    background-color: @white-main;
  }
}

.btn-link {
  .btn-clear();
  color: @info-default;

  &:hover,
  &:focus {
    color: @info-hover;
  }

  &:active {
    color: @info-active;
  }

  &&[disabled] {
    background-color: @white-main;
  }

  .btn-loading(@info-default);
}

.btn-dashed {
  border-style: dashed;
}

.@{btn-prefix-cls} {
  .btn();
  .btn-default();

  > span {
    display: inline-block;
  }

  &-block {
    width: 100%;
  }

  &-primary {
    .btn-primary();
  }

  &-text {
    .btn-text();
  }

  &-link {
    .btn-link();
  }

  &-dashed {
    .btn-dashed();
  }

  &-large {
    .btn-size(@btn-height-large, @btn-font-large, @btn-padding-large, @btn-line-large);
  }

  &-small {
    .btn-size(@btn-height-small, @btn-font-small, @btn-padding-small, @btn-line-small);
  }

  &-warning {
    .btn-status('warn');
  }

  &-danger {
    .btn-status('error');
  }

  &-round {
    border-radius: @btn-height-default;
  }

  &-circle {
    min-width: @btn-height-default + 1px;
    padding: 0;
    text-align: center;
    // vertical-align: middle;
    border-radius: 50%;

    &.@{btn-prefix-cls}-small {
      min-width: @btn-height-small;
    }

    &.@{btn-prefix-cls}-large {
      min-width: @btn-height-large + 2px;
    }
  }

  &-loading::before {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    border-radius: inherit;
    opacity: 0.35;
    transition: opacity 0.2s;
    content: '';
    pointer-events: none;
    inset: -1px;
  }

  &:not(.@{btn-prefix-cls}-only-icon) > .@{btn-prefix-cls}-icon {
    &-left {
      margin-right: @btn-icon-margin;
    }

    &-right {
      margin-left: @btn-icon-margin;
    }
  }

  &-icon-left,
  &-icon-right {
    vertical-align: text-top;
  }

  &-only-icon {
    min-width: @btn-height-default + 1px;
    padding: 4.2px 0;

    &.@{btn-prefix-cls}-small {
      min-width: @btn-height-small;
    }

    &.@{btn-prefix-cls}-large {
      min-width: @btn-height-large + 2px;
    }
  }

  &-noStyle {
    box-shadow: @btn-shadow;
    transition: all @btn-transition-time;

    &:hover,
    &:focus,
    &:active {
      box-shadow: @btn-noStyle-shadow;
      filter: grayscale(0.3);
    }
  }
}

a.@{btn-prefix-cls} {
  box-sizing: border-box;
  line-height: @btn-line-default - 0.125;
  text-decoration: none;

  &-disabled {
    cursor: no-drop;
  }
}
